<template>
	<view class="">
		<view class="edit-tip">编辑个人资料</view>
		<view class="setup" >
			<view class="avatar" @tap="ChooseAvatar">
				<view class="desc">
					<image src="/static/images/icon/avatar_setting.png" mode=""></image>
					<text>头像</text>
				</view>
				<view class="right">
					<image :src="me.avatar" mode="aspectFill" class="avatar-img"></image>
					<image src="/static/images/user/godetail.png" mode=""></image>
				</view>
			</view>
			
			<view class="cover" @tap="ChooseCover">
				<view class="desc">
					<image src="/static/images/icon/cover_setting.png" mode=""></image>
					<text>封面</text>
				</view>
				<view class="right">
					<image :src="me.cover" mode="aspectFill"  class="cover-img"></image>
					<image src="/static/images/user/godetail.png" mode=""></image>
				</view>
			</view>
			
			<view class="username" @tap="href('/pages/user/comps/setusername?name='+me.name)">
				<view class="desc">
					<image src="/static/images/icon/username_setting.png" mode=""></image>
					<text>用户名</text>
				</view>
				
				<view class="right">
					<view class="name" v-if="me.name != null">{{me.name}}</view>
					<image src="/static/images/user/godetail.png" mode=""></image>
				</view>
			</view>
			
			<view class="phone" >
				<view class="desc">
					<image src="/static/images/icon/phone_setting.png" mode=""></image>
					<text>手机号</text>
				</view>
				<view class="right">
					<button open-type="getPhoneNumber" @getphonenumber="getPhoneNumber" withCredentials="true" class="my-phone" v-if="me.phone">{{me.phone}}</button>
					<button open-type="getPhoneNumber" @getphonenumber="getPhoneNumber" withCredentials="true" class="set-phone" v-else>点击获取手机号</button>
					<!-- <view class="my-phone" v-if="me.phone != null">{{me.phone}}</view> -->
					<image src="/static/images/user/godetail.png" mode=""></image>
				</view>
			</view>
			
			<view class="bio"  @tap="href('/pages/user/comps/setbio?bio='+me.bio)">
				<view class="desc">
					<image src="/static/images/icon/intro_setting.png" mode="aspectFill"></image>
					<text>简介</text>
				</view>
				
				<view class="intro">
					<view v-if="me.bio !== null" class="me-bio">{{me.bio}}</view>
					<view class="none_me_bio" v-else>介绍自己，让别人更了解你</view>
					<image src="/static/images/user/godetail.png" mode=""></image>
				</view>
			</view>
			
			<view class="invite">
				<view class="desc">
					<image src="/static/images/icon/invite_icon.png" mode="aspectFill"></image>
					<text>允许用户邀请进入圈子</text>
				</view>
				
				<view class="right" @tap="toggleInvite2Cir">
					<image src="/static/images/icon/permis_invite.png" mode="aspectFill" v-if="isInvited"></image>
					<image src="/static/images/icon/reject_invite.png" mode="aspectFill" v-if="!isInvited"></image>
				</view>
			</view>
			<!-- 从2018年4月30日开始，小程序与小游戏的体验版、开发版调用 wx.getUserInfo 接口，将无法弹出授权询问框，默认调用失败
					 解决方案：根据官网的提示，使用 button 组件，并将 open-type 指定为 getUserInfo 类型，获取用户基本信息。-->
			<!-- <button class="sync-btn" type="primary"  @click="syncWechat">同步微信资料</button> -->
			<button class='sync-btn' type="primary" open-type="getUserInfo" @getuserinfo="syncWechat" withCredentials="true">同步微信资料</button>
		</view>
	</view>
	
</template>

<script>
	import api from '../../../common/api.js';
	import Vue from 'vue';
	// var _self
	export default {
		data() {
			return {
				wechatUser:[],
				me:{},
				images:[],
				upload_api: this.uploadApi,
				isInvited:null,			//是否允许用户邀请进入圈子
			}
		},
		watch:{
			me: {//监听父组件传值变化
				handler(newValue) {
				this.me = newValue
				},
				deep:true
			}
		},
	
		onShow() {
			this.getMe()
		},
		
		methods:{
			toggleInvite2Cir() {//切换允许用户邀请进入圈子
				let _that = this
				if(this.isInvited) {
					uni.showModal({
						title:'提示',
						content:'禁止用户邀请进入圈子',
						success: async function(res) {
							if(res.confirm) {
								let sres = await api.setInvite2Cir(0)
								if(sres.err == 0) {
									_that.isInvited = 0
									uni.showToast({
										title:sres.msg,
										duration:800,
									})
								}else {
									_that.isInvited = 1
								}
							}
						}
					})
				}else {
					uni.showModal({
						title:'提示',
						content:'允许用户邀请进入圈子',
						success: async function(res) {
							if(res.confirm) {
								let sres = await api.setInvite2Cir(1)
								if(sres.err == 0) {
									_that.isInvited = 1
									uni.showToast({
										title:sres.msg,
										duration:800,
									})
								}else {
									_that.isInvited = 0
								}
							}
						}
					})
				}
			},
			
			async asyncUserData(){ //尝试同步用户个人信息
				var that = this
				let infoRes = await uni.getUserInfo({
					lang:"zh_CN"
				})
				console.log(infoRes)
				let res = await api.AsyncUserData(infoRes[1])
				uni.showToast({
					title:'同步成功',
					icon:'success'
				})
				console.log('AsyncUserData',res);
				await this.getMe()
				uni.$emit('changeavatar')
			},
			
			async getPhoneNumber (e) {//绑定手机号
			　　if(e.detail.errMsg=="getPhoneNumber:ok"){
			      let res = await api.GetUserPhone(e.detail.encryptedData,e.detail.iv)
						let sres = await api.SetUserPhone(res.purePhoneNumber)
						console.log(sres);
						if(sres.err == 0) {
							await this.getMe()
							uni.showToast({
								title:sres.msg,
								duration:800
							})
						}
				}else{
			        console.log('用户点击了拒绝') ;   
			    }
			},
			async getMe() {
				let res = await api.GetMe()
				this.me = res[0]
				console.log(this.me);
				this.isInvited = this.me.invite
				console.log(this.isInvited);
			},
			
			async syncWechat() {//同步微信个人信息 
				await this.asyncUserData()
			},
			
			ChooseAvatar() {//修改头像
				var _self = this
				uni.chooseImage({
					count: 1 ,//默认1
					sizeType: ['original','compressed'], //可以指定是原图还是压缩图，默认二者都有 'original', 'compressed'
					sourceType: ['camera','album'], //从相册选择 'album','camera'
					success: (res) => {
						res.tempFilePaths.forEach((item,index)=>{
							uni.showLoading({title:"上传中"});
							var uploadTask2 = uni.uploadFile({
								url: _self.upload_api,
								// url:'http://bbtest.test/api/upload',
								filePath: item,
								fileType: 'image',
								name: 'file',
								dataType: 'json',
								success: function (uploadFileRes) {
									uni.hideLoading();
									// 上传成功后返回服务器端保存的路径
									var jsondata = JSON.parse(uploadFileRes.data)
									if( jsondata.err ==0 ){
										api.SetAvatar(jsondata.file_path)
										_self.me.avatar = jsondata.file_path
										_self.images.push(jsondata.file_path)
										uni.$emit('changeavatar')
										uni.showToast({
											title: jsondata.msg,
											duration:800
										})
									}else{
										uni.showToast({
											title:jsondata.msg,
											icon:'none'
										})
									}
									
									}
							 });
						})
					}
				});
			},
			
			ChooseCover() {//修改封面
				var _self = this
				uni.chooseImage({
					count: 1 ,//默认1
					sizeType: ['original','compressed'], //可以指定是原图还是压缩图，默认二者都有 'original', 'compressed'
					sourceType: ['camera','album'], //从相册选择 'album','camera'
					success: (res) => {
						var nres = JSON.stringify(res.tempFilePaths[0])
						console.log(res.tempFilePaths[0]);
						// this.tui.href('/pages/user/comps/cropper-default?src=' + nres);
						res.tempFilePaths.forEach((item,index)=>{
							uni.showLoading({title:"上传中"});
							var uploadTask2 = uni.uploadFile({
								url: _self.upload_api,
								filePath: item,
								fileType: 'image',
								name: 'file',
								dataType: 'json',
								success: function (uploadFileRes) {
									uni.hideLoading();
									// 上传成功后返回服务器端保存的路径
									var jsondata = JSON.parse(uploadFileRes.data)
									if( jsondata.err ==0 ){
										api.SetCover(jsondata.file_path)
										_self.me.cover = jsondata.file_path  //直接替换显示的cover
										_self.images.push(jsondata.file_path)
										uni.showToast({
											title: jsondata.msg,
											duration:800
										}) 
									}else {
										uni.showToast({
											title:jsondata.msg,
											icon:'none'
										})
									}
									
									// uni.redirectTo({
									// 	url:'/pages/user/comps/setup'
									// })
								}
							 });
						})
					}
				});
			},
			
			href(url) {
				uni.navigateTo({
					url
				})
			}
		}
		
	}
</script>

<style lang="scss" scoped>
.edit-tip {
	display: flex;
	align-items: center;
	padding: 0 26rpx;
	height: 100rpx;
	width: 750rpx;
	background: #f3f3f3;
	font-size: 30rpx;
	color: #7d7d7d;
}
.setup {
	padding:0 30rpx 30rpx;
	image {
		margin-right: 10rpx;
		width: 45rpx;
		height: 45rpx;
	}
	.avatar ,.cover, .username,.phone, .bio,.invite {
		display: flex;
		align-items: center;
		height: 120rpx;
		justify-content: space-between;
		border-bottom: 2rpx solid #F3F6F5;
		.desc {
			display: flex;
			align-items: center;
			image {
				width: 45rpx;
				height: 45rpx;
				margin-right: 20rpx;
			}
		}
	}
	.invite {
		.right {
			image {
				width: 100rpx;
				height: 60rpx;
				margin-right: 65rpx;
			}
		}
	}
	.phone {
		.getphone {
			width: 150rpx;
		}
		.right {
			width: 300rpx;
			
			.my-phone,.set-phone {
				margin: 0 10rpx 0 0;
				font-size: 30rpx;
				padding: 0;
				width: 210rpx;
			}
			.set-phone {
				color: #999;
			}
			.name {
				display: -webkit-box;
				line-height: 100rpx;
				height: 100rpx;
				font-size: 28rpx;
				overflow: hidden;
				text-overflow: ellipsis;
				-webkit-line-clamp: 1;
				line-clamp: 1;
				-webkit-box-orient: vertical;
			}
			
			
		}
	}
	.username {
		.right {
			
			width: 300rpx;
			.name {
				display: -webkit-box;
				line-height: 100rpx;
				width: 200rpx;
				height: 100rpx;
				text-align: right;
				margin-right: 10rpx;
				font-size: 28rpx;
				overflow: hidden;
				text-overflow: ellipsis;
				-webkit-line-clamp: 1;
				line-clamp: 1;
				-webkit-box-orient: vertical;
			}
		}
	}
	.bio {
		.intro {	
			display: flex;
			justify-content: flex-end;
			align-items: center;
			.me-bio,.none_me_bio {
				width: 400rpx;
				height: 80rpx;
				text-align: right;
				margin-right: 10rpx;
				line-height: 80rpx;
				font-size: 32rpx;
				text-overflow: -o-ellipsis-lastline;
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 1;
				line-clamp: 1;
				-webkit-box-orient: vertical;
			}
			.none_me_bio {
				display: flex;
				justify-content: flex-end;
				align-items: center;
				color: #686868;
			}
		}
		// line-height: 100rpx;
	}
	.right {
		display: flex;
		align-items: center;
		justify-content: flex-end;
		height: 100rpx;
		width: 200rpx;
		
	}
	.cover-img {
		width: 110rpx;
		height: 80rpx;
		image {
			width: 100%;
			height: 100%;
		}
	}
	.avatar-img {
		width: 100rpx;
		height: 100rpx;
		border-radius: 50rpx;
		image {
			width: 100%;
			height: 100%;
			
		}
	}
	.sync-btn {
		margin-top: 240rpx;
	}
	.edit-btn {
		margin-top: 50rpx;
	}
}
</style>
